<template>
  <div class="container">
    <!-- 数据大屏展示内容区域 -->
    <div ref="screenRef" class="screen">
      <!-- 顶部 -->
      <div class="screen-top">
        <Top></Top>
      </div>
      <!-- 底部 -->
      <div class="screen-bottom">
        <!-- 底部左区域 -->
        <div class="bottom-left">
          <Tourist class="bottom-left-tourist"></Tourist>
          <Sex class="bottom-left-sex"></Sex>
          <Age class="bottom-left-age"></Age>
        </div>
        <!-- 底部中间区域 -->
        <div class="bottom-center">
          <Map class="bottom-center-map"></Map>
          <Line class="bottom-center-line"></Line>
        </div>
        <!-- 底部右侧区域 -->
        <div class="bottom-right">
          <Rank class="bottom-right-rank"></Rank>
          <Year class="bottom-right-year"></Year>
          <Counter class="bottom-right-counter"></Counter>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
//引入子组件
import Top from "./components/top.vue";
import Tourist from "./components/tourist.vue";
import Sex from "./components/sex.vue";
import Age from "./components/age.vue";
import Map from "./components/map.vue";
import Line from "./components/line.vue";
import Rank from "./components/rank.vue";
import Year from "./components/year.vue";
import Counter from "./components/counter.vue";
import { onMounted, ref } from "vue";

//获取大屏dom元素
let screenRef = ref();

//生命周期
onMounted(()=>{
  screenRef.value.style.transform = `scale(${get_screen_scale()}) translate(-50%,-50%)`;
})


//原生:监听视口的变化
window.onresize = () => {
  screenRef.value.style.transform = `scale(${get_screen_scale()}) translate(-50%,-50%)`;
}
//功能函数:计算大屏缩放比例
function get_screen_scale (w=1920, h=1080) {
  const ww = window.innerWidth / w;
  const wh = window.innerHeight / h;
  return ww < wh ? ww : wh
}
</script>
<script lang="ts">
export default {
  name:"Screen"
}
</script>

<style scoped>
.container{
  width:100vw;
  height:100vh;
  background: url("@/assets/images_screen/bg.png") no-repeat;
  background-size: cover;
}
/* 大屏展示区域 */
.container .screen{
  width: 1920px;
  height:1080px;
  position: fixed;  /*固定定位*/
  top:50%;  /*往下偏移一半*/
  left:50%;
  transform-origin: left top;  /*缩放基点*/
}

/*大屏上部分*/
.screen .screen-top{
  width:100%;
  height:40px;
}

/*大屏下部分*/
.screen .screen-bottom{
  display: flex;
}
/*大屏下部分左边部分*/
.screen .screen-bottom .bottom-left {
  flex:1;
  height:1040px;
  display:flex;
  flex-direction: column;
}
.bottom-left-tourist{
  flex:1.5;
}
.bottom-left-sex{
  flex:1;
}
.bottom-left-age{
  flex:1;
}
/*大屏下部分的中间部分*/
.screen .screen-bottom .bottom-center {
  flex:2;
  display: flex;
  flex-direction: column;
}
.bottom-center-map{
  flex:4;
}
.bottom-center-line{
  flex:1;
}
/*大屏下部分的右边部分*/
.screen .screen-bottom .bottom-right {
  flex:1;
  display: flex;
  flex-direction: column;
  margin-left: 40px;
}
.bottom-right-rank{
  flex:1.5;
}
.bottom-right-year{
  flex:1;
}
.bottom-right-counter{
  flex:1;
}
</style>